<template>
  <div>
    <el-form
      class="addInfor"
      label-width="100px"
      size="small"
      :inline="true"
      ref="inforForm"
      :model="form"
    >
      <div class="form_wrap clearfix">
        <el-form-item label="产权人姓名:" prop="ownerName" class="input_wrap">
          <el-input v-model="form.ownerName"></el-input>
        </el-form-item>
        <el-form-item label="小区名:" prop="estateName" class="input_wrap">
          <el-input v-model="form.estateName"></el-input>
        </el-form-item>
        <el-form-item label="房屋新旧:" prop="oldNew" class="input_wrap">
          <el-input v-model="form.oldNew"></el-input>
        </el-form-item>
        <el-form-item label="建筑梯户数:" prop="houseHolds" class="input_wrap">
          <el-input v-model="form.houseHolds"></el-input>
        </el-form-item>
        <el-form-item label="房屋楼层:" prop="houseFloor" class="input_wrap">
          <el-input v-model="form.houseFloor"></el-input>
        </el-form-item>
        <el-form-item label="物业费:" prop="propertyFee" class="input_wrap">
          <el-input v-model="form.propertyFee">
            <template slot="append">(元)</template>
          </el-input>
        </el-form-item>
        <el-form-item label="建筑面积:" prop="area" class="input_wrap">
          <el-input v-model="form.area">
            <template slot="append">(m²)</template>
          </el-input>
        </el-form-item>
        <el-form-item label="房屋架构:" prop="structure" class="input_wrap">
          <el-input v-model="form.structure"></el-input>
        </el-form-item>
        <el-form-item label="房屋户型:" prop="model" class="input_wrap">
          <el-input v-model="form.model"></el-input>
        </el-form-item>
        <el-form-item label="建成年限:" prop="age" class="input_wrap">
          <el-input v-model="form.age">
            <template slot="append">年</template>
          </el-input>
        </el-form-item>
        <el-form-item label="房屋状态:" prop="state" class="input_wrap">
          <el-input v-model="form.state"></el-input>
        </el-form-item>

        <el-form-item label="贝壳网咨询:" prop="conch" class="input_wrap">
          <el-input v-model="form.conch"></el-input>
        </el-form-item>
        <el-form-item label="有无车位:" prop="carport" class="input_wrap">
          <el-input v-model="form.carport"></el-input>
        </el-form-item>
        <el-form-item label="初评估总价:" prop="assessment" class="input_wrap">
          <el-input v-model="form.assessment">
            <template slot="append">(万元)</template>
          </el-input>
        </el-form-item>
        <el-form-item label="房屋单价:" prop="housingPrice" class="input_wrap">
          <el-input v-model="form.housingPrice">
            <template slot="append">(元)</template>
          </el-input>
        </el-form-item>
        <el-form-item label="装修情况:" prop="renovation" class="input_wrap">
          <el-input v-model="form.renovation">
<!--            <template slot="append">(元)</template>-->
          </el-input>
        </el-form-item>
        <el-form-item
          label="特别说明:"
          prop="especially"
          class="input_wrap full"
        >
          <el-input
            v-model="form.especially"
            type="textarea"
            :autosize="{ minRows: 2 }"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="房屋配套:"
          prop="ancillary"
          class="input_wrap full"
        >
          <el-input
            v-model="form.ancillary"
            type="textarea"
            :autosize="{ minRows: 2 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="借款用途:" prop="purpose" class="input_wrap full">
          <el-input v-model="form.purpose"></el-input>
        </el-form-item>
        <el-form-item label="还款来源:" prop="source" class="input_wrap full">
          <el-input v-model="form.source"></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {}
    };
  },
  props: ["formData"],
  watch: {
    formData: {
      //深度监听，可监听到对象、数组的变化
      handler(val) {
        console.log(val);
        if (val) {
          this.form = JSON.parse(JSON.stringify(val));
        }
      },
      deep: true, //true 深度监听
      immediate: true
    }
  },
  created() {},
  computed: {},
  methods: {}
};
</script>
<style lang="less" scoped>
.form_wrap {
  border: 1px solid rgba(238, 238, 238, 1);
  border-radius: 8px;
  box-sizing: border-box;
  padding: 20px 20px 0;
}
.input_wrap {
  width: 33.33%;
  margin-right: unset;
  display: flex;
  float: left;
  height: 33px;
}
.full {
  width: 100%;
  margin-bottom: 15px;
  height: auto;
}
.input_wrap ::v-deep .el-form-item__content {
  flex: 1;
}
.input_wrap ::v-deep .el-select {
  width: 100%;
  line-height: 30px;
}
.input_wrap ::v-deep .el-input__inner {
  line-height: 30px;
  box-sizing: border-box;
}
</style>
